<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端服务器测试页面</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            text-align: center;
            background: rgba(255,255,255,0.1);
            padding: 40px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .status {
            font-size: 1.2rem;
            margin: 20px 0;
        }
        .success {
            color: #4CAF50;
        }
        .info {
            color: #2196F3;
        }
        ul {
            text-align: left;
            display: inline-block;
        }
        li {
            margin: 10px 0;
        }
        .btn {
            background: #409eff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            margin: 10px;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #337ecc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 前端服务器运行正常！</h1>
        
        <div class="status success">
            ✅ Vite 开发服务器已启动
        </div>
        
        <div class="status info">
            🌐 当前访问地址：<span id="currentUrl"></span>
        </div>
        
        <h3>🔧 如果主应用无法加载，请尝试以下解决方案：</h3>
        
        <ul>
            <li>📍 访问 <strong>http://localhost:5173/</strong> 而不是 IP 地址</li>
            <li>🔄 按 <strong>Ctrl + F5</strong> 强制刷新页面</li>
            <li>🛠️ 打开浏览器开发者工具（F12）查看控制台错误</li>
            <li>🔍 检查网络标签页中是否有资源加载失败</li>
            <li>🚀 重启 Vite 开发服务器：<code>Ctrl+C</code> 然后 <code>npm run dev</code></li>
        </ul>
        
        <h3>🌐 尝试访问主应用：</h3>
        <a href="http://localhost:5173/" class="btn">localhost:5173</a>
        <a href="http://127.0.0.1:5173/" class="btn">127.0.0.1:5173</a>
        
        <div class="status info" style="margin-top: 30px;">
            ⏰ 页面生成时间：<span id="timestamp"></span>
        </div>
    </div>

    <script>
        // 显示当前访问的URL
        document.getElementById('currentUrl').textContent = window.location.href;
        
        // 显示当前时间
        document.getElementById('timestamp').textContent = new Date().toLocaleString('zh-CN');
        
        // 添加一些调试信息
        console.log('🎯 前端服务器测试页面加载成功');
        console.log('🌐 当前URL:', window.location.href);
        console.log('📱 用户代理:', navigator.userAgent);
        console.log('🕒 页面加载时间:', new Date().toISOString());
    </script>
</body>
</html>